<template>
  <div class="flex-1 flex flex-col">
    <!-- 聊天标题区 -->
    <ChatHeader :title="title" :modelName="modelName" />

    <!-- 聊天内容区 -->
    <ChatWindow :messages="messages" />

    <!-- 输入区域 -->
    <ChatInput @send-message="handleSendMessage" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChatHeader from './ChatHeader.vue';
import ChatWindow from './ChatWindow.vue';
import ChatInput from './ChatInput.vue';

const title = ref('随便聊聊');
const modelName = ref('gpt-4o-mini');

// 聊天消息列表
const messages = ref([
  {
    id: 1,
    sender: 'ai',
    content: '👋 晚上好\n\n我是您的AI智能助理 LobeChat，请问您今天需要帮助什么？\n\n如果需要获得为您专业或定制的帮助，可以点击 "+" 创建自定义助手',
    timestamp: new Date(),
  }
]);

// 处理发送消息
const handleSendMessage = (message) => {
  // 添加用户消息
  messages.value.push({
    id: messages.value.length + 1,
    sender: 'user',
    content: message,
    timestamp: new Date(),
  });

  // 模拟AI回复
  setTimeout(() => {
    messages.value.push({
      id: messages.value.length + 1,
      sender: 'ai',
      content: `我收到了您的消息: "${message}"。这是一个AI回复示例。在实际应用中，这里会调用AI模型API来获取真实回复。`,
      timestamp: new Date(),
    });
  }, 1000);
};
</script>

<style scoped>
</style> 